<template>
  <div class="div">
    <a-row class="top_font">
      <a-col span="10" class="">
        <a-input addon-before="权限名: " v-model="search.permissions"/>
      </a-col>
      <a-col span="4">
        <a-button
          style="margin-left: 32px"
          icon="search"
          type="primary"
          htmlType="submit"
          @click="searchList()"
        >查询</a-button>
      </a-col>
    </a-row>
    <a-row class="center_margin">
      <a-col span="10" class="">
        <a-input addon-before="权限：" v-model="search.url"/>
      </a-col>
      <a-col span="4">
        <a-button
          icon="sync"
          style="margin-left: 32px"
          @click="reset()"
        >重置</a-button>
      </a-col>
    </a-row>
    <a-row style="margin-top:10px">
      <a-button
        icon="plus"
        type="primary"
        htmlType="submit"
        @click="addInfo()"
      >新增</a-button>
    </a-row>
    <a-row class="bottom_font">
      <a-col class="title" span="3">
        编号
      </a-col>
      <a-col class="title" span="3">
        更新时间
      </a-col>
      <a-col class="title" span="3">
        权限名
      </a-col>
      <a-col class="title" span="3">
        权限
      </a-col>
      <a-col class="title" span="3">
        状态
      </a-col>
      <a-col class="title" span="4">
        备注
      </a-col>
      <a-col class="title" span="5">
        操作
      </a-col>
    </a-row>
    <a-list :data-source="data" :pagination="{onChange: (current, size) => {this.num = current, this.searchViews?this.searchInfo():this.getAll()}, showQuickJumper: true, pageSize: 15, total: totalList}">
      <a-list-item slot="renderItem" slot-scope="item,index">
        <a-col class="numb" span="3">
          {{ index }}
        </a-col>
        <a-col class="numb" span="3">
          {{ item.updateTime }}
        </a-col>
        <a-col class="numb" span="3">
          {{ item.permissions }}
        </a-col>
        <a-col class="numb" span="3">
          {{ item.url }}
        </a-col>
        <a-col class="numb" span="3">
          {{ item.state }}
        </a-col>
        <a-col class="numb" span="4">
          {{ item.comment }}
        </a-col>
        <a-col class="numb" span="5">
          <a-button @click="edit(index)" type="link" size="small" class="operate_change">编辑</a-button>
          <a-button @click="del(index)" type="link" size="small" class="operate_change">删除</a-button>
          <a-button @click="dis(index)" type="link" size="small" class="operate_change">禁用</a-button>
        </a-col>
      </a-list-item>
    </a-list>
    <a-modal
      title="信息修改"
      style="top: 20px;"
      :width="800"
      v-model="addPermissionsInfo"
      @ok="addHandleOk()"
    >
      <a-form class="permission-form">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="权限名称" hasFeedback>
          <a-input v-model="add.permissions"/>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="权限" hasFeedback>
          <a-textarea v-model="add.url"/>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注" hasFeedback>
          <a-input v-model="add.comment"/>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      title="信息修改"
      style="top: 20px;"
      :width="800"
      v-model="updatePermissionsInfo"
      @ok="updateHandleOk()"
    >
      <a-form class="permission-form">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="权限名称" hasFeedback>
          <a-input v-model="update.permissions"/>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="权限" hasFeedback>
          <a-textarea v-model="update.url"/>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注" hasFeedback>
          <a-input v-model="update.comment"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { deleteAuthority, disAuthority, addAuthority, searchAuthority, getAllAuthority, updateAuthority } from '@/api/manage'
export default {
  data () {
      return {
        data: [],
        num: 1,
        totalList: 0,
        searchViews: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        search: { permissions: '', url: '', pageNum: 1, pageSize: 15 },
        addPermissionsInfo: false,
        updatePermissionsInfo: false,
        add: { permissions: '', url: '', comment: '' },
        update: { id: '', permissions: '', url: '', comment: '' }
      }
  },
  created () {
      this.getAll()
  },
  methods: {
    edit (index) {
      this.updatePermissionsInfo = true
      this.$set(this.update, 'id', this.data[index].id)
      this.$set(this.update, 'permissions', this.data[index].permissions)
      this.$set(this.update, 'url', this.data[index].url)
      this.$set(this.update, 'comment', this.data[index].comment)
    },
    del (index) {
      const Id = { id: this.data[index].id }
      deleteAuthority(Id).then((res) => {
        // console.log('success')
      })
    },
    dis (index) {
      const Id = { id: this.data[index].id }
      disAuthority(Id).then((res) => {
        // console.log('success')
      })
    },
    searchList () {
      this.num = 1
      // 进入搜索条件
      this.searchViews = true
      this.searchInfo()
    },
    searchInfo () {
      this.$set(this.search, 'pageNum', this.num)
      searchAuthority(this.search).then((res) => {
        this.data = res.datalist
        this.totalList = Number(res.total)
        // console.log(res)
      })
    },
    addInfo () {
      this.addPermissionsInfo = true
    },
    reset () {
      this.$set(this.search, 'permissions', '')
      this.$set(this.search, 'url', '')
      this.num = 1
      if (this.searchViews) {
        this.getAll()
      }
      this.searchViews = false
    },
    getAll () {
        const page = { content: '', pageSize: 15, pageNum: this.num }
        getAllAuthority(page).then((res) => {
            this.data = res.datalist
            this.totalList = Number(res.total)
            // console.log(res)
            // console.log('success')
        })
    },
    addHandleOk () {
      addAuthority(this.add).then((res) => {
        this.addPermissionsInfo = false
        // console.log('success')
      })
    },
    updateHandleOk () {
      updateAuthority(this.update).then((res) => {
        this.updatePermissionsInfo = false
        // console.log('success')
      })
    }
  }
}
</script>

<style scoped>
.div{
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 40px;
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 100%;
}
.inputround{
    width: 50%;
    border-radius: 25px;
    border-width: 1pX;
}
.top_font{
    font-size: larger;
}
.center_margin{
    margin-top: 10px;
    font-size: larger;
}
.img{
    height: 20px;
    width: 20px;
    border-radius: 100%;
    margin-left: 32px
}
.bottom_font{
    font-size: larger;
    margin-top: 10px;
    background-color: rgba(241, 247, 247, 0.979);

}
.title{
    text-align: center;
}
.numb{
  text-align: center;
  word-break:break-all;
	display:-webkit-box;
	-webkit-line-clamp:1;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.operate_change{
    color: chartreuse;
    margin-right: 2px;
}

.operate_delete{
    color: crimson;
     margin-right: 2px;
}

.operate_stop{
    color: darkkhaki;
     margin-right: 2px;
}

.operate_add{
    color:darkturquoise;
    margin-right: 2px;
}
</style>
